'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import React from 'react'

export default function Header() {
  const linkData = [
    {
      label: 'Performance',
      href: '/performance',
    },
    {
      label: 'Reliability',
      href: '/reliability',
    },
    {
      label: 'Scale',
      href: '/scale',
    },
  ]
  const pathName = usePathname()
  return (
    <div className="absolute w-full z-10">
      <div className="flex justify-between items-center container mx-auto py-5 text-white">
        <Link className="text-3xl font-bold" href={'/'}>Home</Link>
        <div className="text-xl flex gap-4">
          {linkData.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={pathName === item.href ? 'text-purple-500' : ''}
            >
              {item.label}
            </Link>
          ))}
        </div>
      </div>
    </div>
  )
}
